/*id采用#*/


html,body{
		-webkit-user-select:none;
	    -moz-user-select:none;
	    -ms-user-select:none;
	   
		margin:0%;
		height:100%;
		width: 100%;
		min-width: 900px;
		min-height: 700px;
		color:  #e4e4e4;
		text-align: center;	
	
	}
body{
	

	
}



button{
	outline: none;
}



.panel_board{
	position: relative;
	height:48%;
}
.panel_board_div{
	position: relative;
	float: left;  
	margin-right: 5.5%;
	
	width: 18%;
	height:100%;
	padding-top: 0.5%;
	box-sizing: border-box;
	
}

.hide_panel_board_div_L{
	position: absolute;
	float: left;  
	margin-left: 29%;
	width: 18%;
	height:100%;
	padding-top: 0.5%;
	box-sizing: border-box;
	z-index: -1;
}
.hide_panel_board_div_R{
	position: absolute;
	float: left;  
	margin-left: 52.5%;
	width: 18%;
	height:100%;
	padding-top: 0.5%;
	box-sizing: border-box;
	z-index: -1;
}


.mean{
	position: relative;float: left;
	width: 36%;
	height:100%; 
   	

}





.down{
	position: relative;
	height: 75%;
	background-color: #060a3a;

	
}
.cicle{
	position: relative;
	float: left;
	height: 83.4%;
	width:39%;
	margin-right: 0.5%;

	 background-image:url(../img/border/bg02.png);
	 background-repeat: no-repeat;
	background-size: 100% 100%;	
}
.showluojing{
	 position: absolute;
	 float: left;
	 height: 83.8%;
	 width:99%;
	 z-index: 1;

	margin-top: 10%;
	
    background-size: no-repeat;
	 background-image:url(../img/border/lljj.png);
	-webkit-transform:rotate(0deg);
}

.showluojing2{
	position: absolute;
      float: left;
    height: 53%;
    width: 62.5%;
    z-index: 1;
    margin-top: 28.2%;
    margin-left: 18.4%;
    background-size: no-repeat;
	 background-image:url(../img/border/luojing.png);
	-webkit-transform:rotate(0deg);
}

.compass{
	position: relative;
	float: left;
	height: 100%;
	width:65%;

}

.compass_show{
	position: relative;
	float: left;
	height: 23%;
	width:100%;
	

}


.choose{
	position: relative;
	height: 83.4%;
	float: left;
	width: 60.5%;
	background-color:#060a3a;
	
	box-sizing: border-box;
	
}
.right{
	position: relative;
	height: 15%;
	margin-top: 1%;
	float: left;
	width: 100%;
	background: #080f50;
	padding-top: 1.5%;
	padding-bottom: 2%;
	padding-left: 1%;
	padding-right: 1%;
		  background-image:url(../img/border/bg04.png);
	 background-repeat: no-repeat;
	background-size: 100% 100%;	
	box-sizing: border-box;
	
	
}
.left{
	position: relative;
	height: 100%;
	float: left;
	width: 100%;
	box-sizing: border-box;
	  background-image:url(../img/border/bg03.png);
	 background-repeat: no-repeat;
	background-size: 100% 100%;	
	
	
}

/* 面板选择按钮*/
.but{
	
    border-radius:3px;
	border:3px solid #088bff;
	height: 120%;
	width: 13%;
	line-height: 44px;
	color: #088bff;
	background-color: transparent;
	
}






.one{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

	
}

.two{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

}
.three{
	
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

}

.four{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;
	
	
	
}

.five{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

}

.six{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

	
}
.seven{
position:absolute;
background-color: #073cff38;
height: 100%;
width: 100%;

	
}

.seven_one{
	position: relative; 
	float:left; 
	height: 100% ;
	width: 36.66%; 
	
	padding: 3.5% 2% 3.5% 3%;
	box-sizing: border-box;
	
}

.eight{
	position:absolute;
	background-color: #073cff38;
	height: 100%;
	width: 100%;
	padding: 5% 3% 3% 3%;
	box-sizing: border-box;
	
}

.nine{
	position:absolute;
	background-color: #073cff38;
	height: 100%;
	width: 100%;
	padding: 3% 3% 3% 3%;
	box-sizing: border-box;
	
}

.force_seven {
	position: absolute;
    width: 74%;
    height: 12%;
    margin: 121% 14% 14% 12%;
	
	
}
.force_seven_1 {
	position: absolute;
    width: 74%;
    height: 12%;
    margin: 193.5% 14% 14% 12%;
	
	
}